<blockquote class="layui-elem-quote">
    <div class="layui-inline">
        <i class="layui-icon layui-icon-list layui-head-icon"></i>
        <span class="layui-font-16 layui-font-green">编辑会员套餐</span>
    </div>
</blockquote>
<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form">

            <fieldset class="layui-elem-field">
                <legend>返还优惠劵设置:</legend>
                <div class="layui-field-box">
                    <div class="layui-form-item">
                        <label class="layui-form-label">赠送总数量:</label>
                        <div class="layui-input-block">
                            <input type="number" name="give_self_coupon_count" value="{$row.give_self_coupon_count}"
                                required placeholder="" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">每个月赠送的数量:</label>
                        <div class="layui-input-block">
                            <input type="number" name="give_self_month_num" value="{$row.give_self_month_num}"
                                required placeholder="" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
            </fieldset>

            <input type="hidden" name="id" value="{$row.id}">
            <div class="layui-form-item">
                <label class="layui-form-label">套餐名称</label>
                <div class="layui-input-block">
                    <input type="text" name="combo_name" required lay-verify="required" placeholder="请输入套餐名称"
                        autocomplete="off" value="{$row.combo_name}" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">套餐封面</label>
                <div class="layui-input-block">
                    <input type="hidden" name="combo_image" id="icon">
                    <img src="{$row.combo_image}" class="layui-long-upimg" id="upload">
                </div>
            </div>

            

            <div class="layui-form-item">
                <label class="layui-form-label">原价</label>
                <div class="layui-input-inline">
                    <input type="text" value="{$row.origin_price}" name="origin_price" required lay-verify="required"
                        placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">现价</label>
                <div class="layui-input-inline">
                    <input type="text" value="{$row.sell_price}" name="sell_price" required lay-verify="required"
                        placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">升级等级</label>
                <div class="layui-input-block">
                    <select name="user_grade_id" id="user-grade-id">
                        {foreach $gradeOptions as $vo}
                        <option value="{$vo.id}">{$vo.grade_name}</option>
                        {/foreach}
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">赠送积分</label>
                <div class="layui-input-inline">
                    <input type="number" name="give_integral" value="{$row.give_integral}" required
                        lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">赠送优惠券</label>
                <div class="layui-input-block">
                    <div class="layui-inline">
                        <input type="text" id="give-coupon" style="width: 800px;" disabled placeholder=""
                            autocomplete="off" class="layui-input">
                        <input type="hidden" name="give_coupon" id="coupons-info" value="{$row.give_coupon}">
                        {notempty name='row.coupons_info'}
                        <input type="hidden" name="param" id="param" value="{$row.coupons_info|json_encode}">
                        {else /}
                        <input type="hidden" name="param" id="param">
                        {/notempty}
                    </div>
                    <div class="layui-inline">
                        <button type="button" class="layui-btn" id="choose-coupon">选择优惠券</button>
                    </div>
                </div>
                <div class="layui-input-block" id="imgs">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">赠送余额</label>
                <div class="layui-input-block">
                    <input type="text" name="give_balance" value="{$row.give_balance}" required lay-verify="required"
                        placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">套餐描述</label>
                <div class="layui-input-block">
                    <textarea name="combo_desc" id="content" class="layui-textarea">{$row.combo_desc}</textarea>
                </div>
            </div>



            <div class="layui-form-item">
                <label class="layui-form-label">是否上线</label>
                <div class="layui-input-block">
                    <input type="radio" name="status" {if $row.status==1}checked{/if} value="1" title="上线">
                    <input type="radio" name="status" {if $row.status==0}checked{/if} value="0" title="下线">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formAdd">保存套餐</button>
                </div>
            </div>
        </form>
    </div>
</div>
<script>
    //Demo
    layui.use('form', function () {
        var form = layui.form;
        $('#user-grade-id').val('{$row.user_grade_id}');
        form.render('select');
        tinymce.init({
            selector: '#content',
            language: 'zh_CN',
            plugins: 'preview image  emoticons table link hr anchor fullscreen lists',
            toolbar: 'bold italic underline strikethrough alignleft aligncenter alignright alignjustify indent outdent numlist bullist ' +
                'fontselect fontsizeselect forecolor backcolor blockquote removeformat ' +
                'emoticons image link hr anchor fullscreen preview',
            images_upload_url: '/store/upload/layedit',
            min_height: 500,
            setup: function (editor) {
                editor.on('change', function () {
                    editor.save();
                });
            },
        });
        let param = $('#param').val();

        if (param) {
            let data = JSON.parse(param);
            getUseCouponInfo(data);
        }
        function getUseCouponInfo(param) {

            $('#param').val(JSON.stringify(param));

            let coupons = [], name = '', img = '';

            param.forEach(function (item) {
                coupons.push({
                    coupon_id: item.coupon_id,
                    give_num: item.give_num
                });
                name += item.coupon_name + ';;',
                    img += '<div class="layui-inline"> ' +
                    '<img src="' + item.coupon_icon + '" class="layui-view-img">' +
                    '<i data-id="' + item.coupon_id + '" class="layui-icon layui-view-img-close">&#x1006</i>' +
                    '</div>';
            });

            $('#coupons-info').val(JSON.stringify(coupons));
            $('#imgs').html(img);
            $('#give-coupon').val(name);
        }

        $(document).on('click', '.layui-view-img-close', function () {
            let couponsInfo = JSON.parse($('#param').val());
            let id = $(this).attr('data-id');

            let i = couponsInfo.findIndex(function (item) {
                return item.coupon_id == id
            });
            couponsInfo.splice(i, 1);
            getUseCouponInfo(couponsInfo);

        });

        $('#choose-coupon').click(function () {
            layer.open({
                title: ['优惠券'],
                type: 2,
                area: ['1000px', '800px'],
                offset: '30px',
                btn: ['确定', '取消'],
                maxmin: true,
                content: '/store/market/coupon/option',
                yes: function (index, layero) {
                    let checkbox = $(layero).find('iframe').contents().find('.son:checked');
                    if (checkbox.length < 1) {
                        layer.msg('请选择优惠券!', { icon: 2 });
                        return false;
                    }

                    let couponInfo = [];

                    checkbox.each(function () {
                        couponInfo.push({
                            coupon_id: $(this).val(),
                            coupon_name: $(this).parents('tr').find('.coupon-name').text(),
                            coupon_icon: $(this).parents('tr').find('.coupon-icon').attr('src'),
                            give_num: $(this).parents('tr').find('.give_num').val()
                        });
                    })
                    let param = [];

                    let paramEle = $('#param');
                    param = paramEle.val() ? JSON.parse(paramEle.val()).concat(couponInfo) : couponInfo;

                    getUseCouponInfo(param);

                    parent.layer.close(index);
                }
            });

        });

        form.on('submit(formAdd)', function (data) {
            $.post('/store/market/combo/update', data.field, function (res) {
                if (res.code == 1) {

                    parent.location.href = '/store/market/combo'
                    return layer.msg(res.msg, { icon: 1 });
                }

                return layer.msg(res.msg, { icon: 2 });
            });

            return false;
        });

    });
</script>
</body>

</html>